<template>
	<view class="focus">
		<view class="hd">
			<image :src="currentImg" 
					mode="aspectFill"
					@tap="clickBigImg" 
					:data-imgsrc="currentImg" 
					@longpress="longClick">
			</image>
		</view>
		<view class="bd">
			<scroll-view scroll-x="true" class="scroll-x">
				<view class="scroll-view-item" 
					  v-for="(item,index) in imgList" 
					  @tap="clickSmallImg" 
					  :data-imgsrc='item.images' 
					  :key="index">
					<view class="pic">
						<image :src="item.images" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'mulImage',
		props:{
			imgList:{
				type:Array,
				default:function(){
					return [{'images':'','images':''}]
				}
			}
		},
		data() {
			return {
				currentImg:''
			}
		},
		mounted() {
			this.currentImg=this.imgList[0]['images'];
		},
		methods: {
			clickSmallImg(e) {
				this.currentImg = e.currentTarget.dataset.imgsrc;
			},
			clickBigImg(e) {
				// 获取当前点击图片的链接
				var imgSrc = e.currentTarget.dataset.imgsrc;
				//获取图片数组
				var urls = [];
				for (let index in this.imgList) {
					urls[index] = this.imgList[index]['images'];
				}
				uni.previewImage({
					current: imgSrc,
					urls: urls
				})
			},
			longClick(e) {
				// 获取当前点击图片的链接
				// #ifndef H5
				var imgSrc = e.currentTarget.dataset.imgsrc;
				this.util.save_image(imgSrc);
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.focus {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.focus .hd {
		width: 100%;
		padding-bottom: 75%;
		position: relative;
		text-align: center;
	}

	.focus .hd image {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		border:solid 1px #EEEEEE;
	}

	.focus .bd {
		width: 100%;
		margin-top: 30rpx;
	}

	.scroll-x {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.scroll-view-item {
		width: 18%;
		padding: 5rpx;
		border: solid 1px #eeeeee;
		box-sizing: border-box;
		display: inline-block;
		margin: 0 8rpx
	}

	.scroll-view-item .pic {
		width: 100%;
		position: relative;
		padding-bottom: 75%;
		overflow: hidden;
	}

	.scroll-view-item .pic image {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
</style>
